<template>
  <div class="home">
    <van-nav-bar fixed>
      <p slot="title" class="title">首页</p>
      <div slot="left" class="top-content">
        <img src="../assets/image/home_add.png" width="22" height="22" alt="" />
        <p class="left-text">{{ city }}</p>
      </div>
      <div slot="right" class="top-content">
        <img
          src="../assets/image/home_kefu.png"
          width="25"
          height="25"
          alt=""
        />
        <p class="left-text" @click="cSClick">客服</p>
      </div>
    </van-nav-bar>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <div class="home-main">
        <div class="hmain">
          <div class="home-item1">
            <div
              v-for="(item, index) in item1Data"
              :key="'a' + index"
              @click="getItem1(item)"
            >
              <img :src="item.img" width="45" height="45" />
              <p>{{ item.text }}</p>
            </div>
          </div>
          <div class="home-item2"></div>
        </div>
        <!-- message -->
        <van-notice-bar
          left-icon="volume-o"
          color="#616161"
          background="#F8F9FC"
        >
          <span slot="default" v-for="(item, index) in message" :key="index">{{
            item
          }}</span>
        </van-notice-bar>
        <!-- 副 -->

        <van-grid :column-num="4" :border="false">
          <van-grid-item
            v-for="(item, index) in fuList"
            :key="'b' + index"
            @click="getItem1(item)"
          >
            <van-image :src="item.img" width="40px" height="40px" />
            <p>{{ item.text }}</p>
          </van-grid-item>
        </van-grid>

        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="(item, index) in banner" :key="'c' + index">
            <img :src="item.imgurl" alt="" width="343" height="180" />
          </van-swipe-item>
        </van-swipe>

        <div class="home_botn">
          <img
            src="../assets/image/home_item_bao.png"
            alt=""
            width="14"
            height="18"
          />
          <p>账户安全由中国众安财险提供风险保障！</p>
        </div>
      </div>
    </van-pull-refresh>
    <tab-bar />
  </div>
</template>
<script>
import TabBar from "views/Tabbar";
import {
  queryUserInfoApi,
  querySystemHistoryMessageInfoApi,
  queryCarouselInfoApi,
  queryNewsInfoTitleApi,
} from "network/ApiServe";

export default {
  created() {
    this.city = localStorage.getItem("city");
    this.token = localStorage.getItem("token");
    this.brandId = localStorage.getItem("brandId");
    this.phone = localStorage.getItem("phone");
    this.token = localStorage.getItem("token");
    this.userId = localStorage.getItem("userId");
  },
  components: {
    TabBar,
  },
  data() {
    return {
      city: this.city,
      isLoading: false,
      userInfo: {},
      newsInfo: {},
      message: [],
      banner: [],

      images: [
        "https://img.yzcdn.cn/vant/apple-1.jpg",
        "https://img.yzcdn.cn/vant/apple-2.jpg",
      ],
      item1Data: [
        {
          img: require("assets/image/home_item11.png"),
          text: "在线收款",
          isRealName: true,
          isOpenH5: false,
          show: "onlinecollection",
        },
        {
          img: require("assets/image/home_item12.png"),
          text: "智能还款",
          isRealName: true,
          isOpenH5: true,
          show: "",
        },
        {
          img: require("assets/image/home_item13.png"),
          text: "超级还款",
          isRealName: true,
          isOpenH5: true,
          show: "",
        },
      ],
      fuList: [
        {
          img: require("assets/image/home_item21.png"),
          isRealName: true,
          isOpenH5: true,
          text: "NP消费",
          show: "",
        },
        {
          img: require("assets/image/home_item22.png"),
          isRealName: false,
          isOpenH5: true,
          text: "办卡申请",
          show: "",
        },
        {
          img: require("assets/image/home_item23.png"),
          isRealName: true,
          isOpenH5: true,
          text: "极速贷款",
          show: "",
        },
        {
          img: require("assets/image/home_item24.png"),
          isRealName: true,
          isOpenH5: true,
          text: "空卡代还",
          show: "",
        },
        {
          img: require("assets/image/home_item31.png"),
          isRealName: true,
          isOpenH5: true,
          text: "卡测评",
          show: "",
        },
        {
          img: require("assets/image/home_item32.png"),
          isRealName: false,
          isOpenH5: true,
          text: "视频推广素材",
          show: "",
        },
        {
          img: require("assets/image/home_item33.png"),
          isRealName: false,
          isOpenH5: true,
          text: "斑马信用",
          show: "",
        },
        {
          img: require("assets/image/home_item34.png"),
          isRealName: true,
          isOpenH5: false,
          text: "升级VIP",
          show: "productupgrade",
        },
      ],
    };
  },

  mounted() {
    this.getMessageInfo();
    this.getBanner();
    this.getUserInfo();
  },
  methods: {
    onRefresh() {
      setTimeout(() => {
        this.getUserInfo();
        this.isLoading = false;
        this.getMessageInfo();
        this.getBanner();
      }, 1000);
    },
    // 用户信息
    getUserInfo() {
      queryUserInfoApi(this.token)
        .then((res) => {
          if (res.resp_code === "000000") {
            this.userInfo = res.result;
            console.log("this.userInfo:", this.userInfo);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //平台消息
    getMessageInfo() {
      this.message = [];
      querySystemHistoryMessageInfoApi(this.token, 1)
        .then((res) => {
          if (res.resp_code === "000000") {
            console.log("平台消息", res);
            res.result.content.filter((item, index) => {
              if (index < 1) {
                this.message.push(item.content);
                // if (item.endTime == null) {

                // }
              }
            });
            console.log(this.message);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    //轮播图
    getBanner() {
      this.banner = [];
      queryCarouselInfoApi(this.brandId)
        .then((res) => {
          console.log("轮播图:", res);
          if (res.resp_code === "000000") {
            res.result.filter((item) => {
              this.banner.push(item);
            });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    //客服
    cSClick() {
      this.$router.push("/customerService");
    },
    // 跳转界面
    getOpen(title, url) {
      this.$router.push({
        name: "OpenWeb",
        params: {
          title: title,
          url: this.addH5Params(url),
        },
      });
    },
    // 新闻
    getNewsInfo(title) {
      let _this = this;
      _this.newsInfo = {};
      console.log("title", title);
      queryNewsInfoTitleApi(this.brandId, "功能跳转", title, 0)
        .then((res) => {
          console.log("1111", res);
          console.log(res.result.content.length);

          if (res.resp_code === "000000") {
            if (res.result.content.length > 0) {
              res.result.content.filter((item) => {
                if (item.title === title) {
                  console.log("新闻", item);
                  _this.newsInfo = item;
                }
              });
              if (
                parseInt(_this.userInfo.grade) >= parseInt(_this.newsInfo.onOff)
              ) {
                _this.getOpen(_this.newsInfo.title, _this.newsInfo.content);
                // window.location.href = item.content;
              } else {
                _this.$dialog
                  .confirm({
                    title: "提示",
                    message:
                      "查看需要" +
                      this.newsInfo.onOff +
                      "级用户及以上可见,请先前往升级",
                  })
                  .then(() => {
                    this.$router.push("productupgrade");
                  })
                  .catch(() => {});
              }
            } else {
              _this.$dialog({
                title: "提示",
                message: "请联系客服人员,需要开发中...",
              });
            }
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    addH5Params(index) {
      let str1 =
        index +
        "?phone=" +
        this.phone +
        "&token=" +
        this.token +
        "&brand_id=" +
        this.brandId +
        "&user_id=" +
        this.userId +
        "&ip=" +
        "application.mingchetech.com" +
        // "app20slb.mingchetech.com" +
        "&type=app";

      return str1;
    },
    // 主功能  副功能
    getItem1(item) {
      if (item.isRealName) {
        if (
          this.getRealnameStatus(this.userInfo.realnameStatus) != "审核通过"
        ) {
          this.$dialog
            .confirm({
              title: "实名认证",
              message: "您还未通过,请先实名认证",
            })
            .then(() => {
              this.$router.push("/choicerealname");
            })
            .catch(() => {});
          return;
        }
      }
      if (item.isOpenH5) {
        this.getNewsInfo(item.text);
      } else {
        this.$router.push(item.show);
      }
    },
    //实名状态
    getRealnameStatus(index) {
      let userShopStatus = "";
      switch (index) {
        case "0":
          userShopStatus = "审核中";
          break;
        case "1":
          userShopStatus = "审核通过";
          break;
        case "2":
          userShopStatus = "审核失败";
          break;
        case "3":
          userShopStatus = "未审核";
          break;
      }
      return userShopStatus;
    },
  },
};
</script>


<style scoped>
.home {
  background-color: #fff;
}
.van-nav-bar {
  background-color: #121212;
}
.title {
  color: #f1ce8a;
  font-size: 16px;
}
.top-content {
  font-size: 14px;
  color: #f1ce8a;
  display: flex;
  align-items: center;
}

.van-hairline--bottom::after {
  border-bottom-width: 0;
}

.hmain {
  background-image: url("../assets/image/home_bg.png");
  background-repeat: no-repeat;
  background-size: cover;
  /* background-position: center; */
  /* background: url("../assets/image/home_bg.png") no-repeat fixed; */
  margin-top: 46px;
}

.home-item1 {
  display: flex;
  justify-content: space-between;
  padding-left: 5px;
  padding-right: 5px;
  align-items: center;
  height: 160px;
}
.home-item1 div {
  margin: auto 5px;
  flex: 1;
  background-color: #2e2f34;
  text-align: center;
  padding: 15px 0;
  align-items: center;
  font-size: 16px;
}

.home-item1 p {
  margin-top: 6px;
  color: #f1ce8a;
  font-size: 15px;
}
.van-notice-bar {
  width: 335px;
  margin: auto;
  border-radius: 22px;
}
.home-item2 {
  background-color: #fff;
  height: 26px;
  border-radius: 90px 90px 0 0;
}
.van-grid-item {
  font-size: 12px;
}
.van-grid-item p {
  margin-top: 8px;
}
.my-swipe {
  width: 343px;
  margin: 10px auto;
  height: 180px;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
}
.home_botn {
  font-size: 13px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 70px;
}
.home_botn img {
  margin-right: 10px;
}
</style>
